<template>
	<div style="display: flex;flex-direction: column;" class="otherPage partyBuildingLeads partyMemberActivities">
		<Header :selected="2"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="2">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="20">
					<el-col class="partyMemberActivitiesImgs" :xs="24" :sm="12" :md="8" :lg="lgSize"
						v-for="(item, index) in partyMemberActivities" :key="index">
						<!-- <div class="partyMemberActivitiesImgsBlock" @click="goToDetail(item.id)"> -->
						<div class="partyMemberActivitiesImgsBlock">
							<img style="width:100%;object-fit: cover;" :src="baseUrl+item.coverImage" />
							<div class="demonstration" :title="item.title">{{item.title}}</div>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24" type="flex" class="paginationArea">
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "  :total="total"
						:prev-text="$t('previousPage')" :next-text="$t('nextPage')"
						@current-change="handleCurrentChange" />
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		partyBuildingLeads
	} from '../../utils/menu.js'
	import {
		getStore,
		setStore
	} from '../../utils/tools.js';
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				isShowJumper: true,
				loading: true,
				baseUrl: this.$request.getImgUrl(),
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 8,
				total: 0,
				currentPage: 1,
				lgSize: 6,
				menus: partyBuildingLeads,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//党建引领
						label: this.$t('partyBuildingLeads'),
						to: '/partyBuildingLeads'
					},
					{
						//党员活动
						label: this.$t('partyMemberActivities'),
						to: '/partyMemberActivities'
					}
				],
				partyMemberActivities: [],
			};
		},
		computed: {},
		created() {
			this.getMemberActivityPage();
		},
		mounted() {
			this.getMemberActivityTopImage();

			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
		},
		methods: {
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			getMemberActivityTopImage() {
				let params = {};
				let that = this;
				that.$request.getMemberActivityTopImage(params).then(res => {
					if (res && res.data) {
						that.bg_img = that.baseUrl + res.data.fileUrl;
					}
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			getMemberActivityPage() {
				let activitiesPage = parseInt(getStore("activitiesPage"));
				let params = {
					"pageNum": activitiesPage > 0 ? activitiesPage : this.currentPage,
					"pageSize": this.pageSize
				};

				let that = this;
				that.$request.getMemberActivityPage(params).then(res => {
					if (res && res.data) {
						that.partyMemberActivities = res.data.records;
						that.total = res.data.total;
						this.currentPage = res.data.current;
					}

				}).catch((error) => {
					console.log(error);
				});
			},
			///////获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				setStore("activitiesPage", this.currentPage);
				this.getMemberActivityPage();
			},
			goToDetail(id) {
				//////跳转详情页面
				this.$router.push({
					name: this.$t("partyMemberActivitiesDetail"),
					query: {
						memberActivityId: id,
					}
				});
			}


		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/partyBuildingLeads/partyBuildingLeads.css");
	@import url("../../components/common/css/partyBuildingLeads/partyMemberActivities.css");

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.partyBuildingLeads .content {
		padding: 0px;
	}

	.content_bg {
		background-color: #ffffff;
		margin: 0 auto;
		padding: 50px;
	}

	.partyMemberActivitiesImgs img {
		height: 208px;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);

		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((2560 * 0.8 - 60)/4));
			height: calc(1px*((2560 * 0.8 - 60)/4 * 350 / 540));
		}

	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((2560 * 0.8 - 60)/4));
			height: calc(1px*((2560 * 0.8 - 60)/4 * 350 / 540));
		}

	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((2320 * 0.8 - 60)/4));
			height: calc(1px*((2320 * 0.8 - 60)/4 * 350 / 540));
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((2120 * 0.8 - 60)/4));
			height: calc(1px*((2120 * 0.8 - 60)/4 * 350 / 540));
		}

	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1920 * 0.8 - 60)/4));
			height: calc(1px*((1920 * 0.8 - 60)/4 * 350 / 540));
		}
	}

	@media (max-width: 1720px) {
		.content_bg {
			width: calc(1720px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1720 * 0.8 - 60)/4));
			height: calc(1px*((1720 * 0.8 - 60)/4 * 350 / 540));
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1520 * 0.8 - 60)/4));
			height: calc(1px*((1520 * 0.8 - 60)/4 * 350 / 540));
		}

	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1366 * 0.8 - 60)/4));
			height: calc(1px*((1366 * 0.8 - 60)/4 * 350 / 540));
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: calc(1120px * 0.8);
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1120 * 0.8 - 40)/3));
			height: calc(1px*((1120 * 0.8 - 40)/3 * 350 / 540));
		}

	}

	@media (max-width: 1024px) {
		.content_bg {
			width: 100%;
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((1024 - 40)/3));
			height: calc(1px*((1024 - 40)/3 * 350 / 540));
		}

	}

	@media (max-width: 900px) {

		.content_bg {
			width: 100%;
			padding: 5px;
		}

	}

	@media (max-width: 768px) {

		.content_bg {
			width: 100%;
			padding: 5px;
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*((758 - 20)/2));
			height: calc(1px*((758 - 20)/2 * 350 / 540));
		}
	}

	@media (max-width: 440px) {

		.content_bg {
			width: 95%;
			padding: 10px;
		}

		.partyMemberActivitiesImgs img {
			width: calc(1px*(420 * 0.8));
			height: calc(1px*(420 * 0.8 * 350 / 540));
		}
		
		.partyMemberActivities .demonstration {
		    text-align: center;
		    width: 100%;
		    height: max-content;
		    line-height: 20px;
		    white-space: unset;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    margin-top: 10px;
		}
	}
</style>
